<template>
  <div class="">
    <img src="@/images/cxsroom.png" alt="" class="chuanbg" />
    <!-- 选择物品 -->
    <div class="jmcxzbbox" v-if="eritems == 1">
      <!-- 提示 -->
      <div class="tipsboxd cxdy">
        <img src="@/images/tiplogo.png" alt="" />
        <span>请从物品栏中选择本次操作所需物品</span>
      </div>
      <!-- 物品栏 -->
      <div class="jmcbox">
        <div
          class="jmcxboxitem"
          v-for="item in wpdata"
          :key="item.id"
          @click="choicewp(item)"
        >
          <img :src="item.src" alt="" class="wpimgs" />
        </div>
      </div>
      <!-- 已选择物品栏 -->
      <div class="yxwpbox">
        <div class="yxwpdesboxs"><span>已选物品列表</span></div>
        <div class="yxwpboxmin">
          <div
            class="yxwpboxminitem"
            v-for="item in yxwpdata"
            :key="item.id"
            @click="yxwpchoice(item.id)"
          >
            <img :src="item.src" alt="" class="wpimgss" />
          </div>
        </div>
      </div>
      <!-- 确定 -->
      <el-button type="primary" round class="ywwpqdq" @click="choiceqd"
        >确 定</el-button
      >
    </div>
    <!-- 选择题 -->
    <div class="jmchoicebox" v-if="eritems == 1.1">
      <span class="jmchoicetm">请选择静脉采血位置:</span>
      <div class="choiceboxsss">
        <div
          class="choiceitem"
          @click="choicefn('A')"
          :class="yxdata.includes('A') ? 'choiceitemyx' : ''"
        >
          <span>A.肘正中静脉</span>
          <img src="@/images/xz1.png" alt="" />
        </div>
        <div
          class="choiceitem"
          @click="choicefn('B')"
          :class="yxdata.includes('B') ? 'choiceitemyx' : ''"
        >
          <span>B.足背动脉</span>
          <img src="@/images/xz2.png" alt="" />
        </div>
        <div
          class="choiceitem"
          @click="choicefn('C')"
          :class="yxdata.includes('C') ? 'choiceitemyx' : ''"
        >
          <span>C.手背静脉</span><img src="@/images/xz3.png" alt="" />
        </div>
        <div
          class="choiceitem"
          @click="choicefn('D')"
          :class="yxdata.includes('D') ? 'choiceitemyx' : ''"
        >
          <span>D.桡动脉</span><img src="@/images/xz4.png" alt="" />
        </div>
      </div>
      <!-- 回答正确or错误 -->
      <span :class="ertext != '' ? 'rightorerrors' : 'rightorerror'">
        {{ ertext || ritext }}
      </span>
      <!-- 确定or继续按钮 -->
      <img
        v-if="qdshow"
        src="@/images/qdan.png"
        alt=""
        class="qdancss"
        @click="qdfn('A', '单选题', 'true')"
      />
      <img
        v-if="!qdshow"
        src="@/images/jxa.png"
        alt=""
        class="qdancss"
        @click="eritems = 1.2"
      />
    </div>
    <!-- 采血完成提示 -->
    <div class="jmchoicebox" v-if="eritems == 1.2">
      <!-- 提示 -->
      <div class="tipsboxd cxdy">
        <img src="@/images/tiplogo.png" alt="" />
        <span>采血前准备已完成，请开始操作</span>
      </div>
      <!-- 物品完成展示 -->
      <div class="wpwczs">
        <div class="wpzsitem">
          <img src="@/images/ywczb.png" alt="" class="wpwcbs" />
          <img src="@/images/wpzb1.png" alt="" class="wpzsimg" />
        </div>
        <div class="wpzsitem">
          <img src="@/images/ywczb.png" alt="" class="wpwcbs" />
          <img src="@/images/wpzb2.png" alt="" class="wpzsimg" />
        </div>
        <div class="wpzsitem">
          <img src="@/images/ywczb.png" alt="" class="wpwcbs" />
          <img src="@/images/wpzb3.png" alt="" class="wpzsimg" />
        </div>
      </div>
      <!-- 确定or继续按钮 -->
      <img
        src="@/images/qdan.png"
        alt=""
        class="qdancss"
        @click="eritemfn(2)"
      />
    </div>
    <!-- 选择题2 -->
    <div class="jmchoicebox" v-if="eritems == 2">
      <span class="jmchoicetm">请选择需要核对的内容（多选）:</span>
      <div class="choiceboxsss">
        <div
          class="choiceitem"
          @click="choicefns('A')"
          :class="yxdata.includes('A') ? 'choiceitemyx' : ''"
        >
          <span>A.患者信息</span>
          <img src="@/images/hd1.png" alt="" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('B')"
          :class="yxdata.includes('B') ? 'choiceitemyx' : ''"
        >
          <span>B.检验单检验项目</span>
          <img src="@/images/hd2.png" alt="" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('C')"
          :class="yxdata.includes('C') ? 'choiceitemyx' : ''"
        >
          <span>C.真空采血管颜色</span><img src="@/images/hd3.png" alt="" />
        </div>
      </div>
      <!-- 回答正确or错误 -->
      <span :class="ertext != '' ? 'rightorerrors' : 'rightorerror'">
        {{ ertext || ritext }}
      </span>
      <!-- 确定or继续按钮 -->
      <img
        v-if="qdshow"
        src="@/images/qdan.png"
        alt=""
        class="qdancss"
        @click="qdfn(['A', 'B', 'C'], '多选题', 'true')"
      />
      <img
        v-if="!qdshow"
        src="@/images/jxa.png"
        alt=""
        class="qdancss"
        @click="eritems = 2.1"
      />
    </div>
    <!-- 选择题2 答案预览解析 -->
    <div class="jmchoicebox" v-if="eritems == 2.1">
      <!-- 提示 -->
      <div class="tipsboxd cxdy">
        <img src="@/images/tiplogo.png" alt="" />
        <span>{{ zhtext }}</span>
      </div>
      <!-- 信息主题 -->
      <img src="@/images/hdxxtcdes.png" alt="" class="hdxxdes" />
      <!-- 核对换着信息 -->
      <img src="@/images/hddzxx1.png" alt="" class="hdx1" />
      <!-- 核对检查项目 -->
      <img src="@/images/hdjcxm1.png" alt="" class="hdx2" />
      <!-- 核对采血管颜色 -->
      <img src="@/images/hdxgys1.png" alt="" class="hdx3" />
      <!-- 继续 -->
      <img
        src="@/images/jxa.png"
        alt=""
        class="qdancss"
        @click="eritems = 2.2"
      />
    </div>
    <!-- 采血码粘贴选择题 -->
    <div class="jmchoicebox" v-if="eritems == 2.2">
      <span class="jmchoicetm">请选择采血码正确的粘贴方式（单选）:</span>
      <div class="choiceboxsss">
        <div
          class="choiceitem"
          @click="choicefns('A')"
          :class="yxdata.includes('A') ? 'choiceitemyx' : ''"
        >
          <span>A.</span>
          <img src="@/images/zt1.png" alt="" class="cxm" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('B')"
          :class="yxdata.includes('B') ? 'choiceitemyx' : ''"
        >
          <span>B.</span>
          <img src="@/images/zt2.png" alt="" class="cxm" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('C')"
          :class="yxdata.includes('C') ? 'choiceitemyx' : ''"
        >
          <span>C.</span><img src="@/images/zt3.png" alt="" class="cxm" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('D')"
          :class="yxdata.includes('D') ? 'choiceitemyx' : ''"
        >
          <span>D.</span><img src="@/images/zt4.png" alt="" class="cxm" />
        </div>
      </div>
      <!-- 回答正确or错误 -->
      <span :class="ertext != '' ? 'rightorerrors' : 'rightorerror'">
        {{ ertext || ritext }}
      </span>
      <!-- 确定or继续按钮 -->
      <img
        v-if="qdshow"
        src="@/images/qdan.png"
        alt=""
        class="qdancss"
        @click="qdfn('A', '单选题', 'true')"
      />
      <img
        v-if="!qdshow"
        src="@/images/jxa.png"
        alt=""
        class="qdancss"
        @click="eritems = 2.3"
      />
    </div>
    <!-- 采血码粘贴选择题 答案预览解析 -->
    <div class="jmchoiceboxs beautifulScroll" v-if="eritems == 2.3">
      <!-- 提示 -->
      <div class="tipsboxd cxdy">
        <img src="@/images/tiplogo.png" alt="" />
        <span>{{ zhtext }}</span>
      </div>
      <!-- 信息主题 -->
      <div class="dff">
        <!--  -->
        <img src="@/images/ztti.png" alt="" class="hdxxdesd" />
        <!-- 继续 -->
        <img
          src="@/images/jxa.png"
          alt=""
          class="qdancssd"
          @click="eritems = 2.4"
        />
      </div>
    </div>
    <!-- 医生对话 -->
    <div class="ysdhbox" v-if="hs != ''">
      <img src="@/images/ysdh.png" alt="" class="ysimg" />
      <div class="ysdhkbox">{{ hs }}</div>
      <div class="jxa" @click="eritemfn(3)">
        继续
        <img src="@/images/jxad.png" alt="" />
      </div>
    </div>
    <!-- 患者对话 -->
    <div class="ysdhbox" v-if="hz != ''">
      <img src="@/images/hz.png" alt="" class="ysimgs" />
      <div class="ysdhkbox">{{ hz }}</div>
      <div class="jxa" @click="eritemfn(3)">
        继续
        <img src="@/images/jxad.png" alt="" />
      </div>
    </div>
    <!-- 绑扎压脉带选择题 -->
    <div class="jmchoicebox" v-if="eritems == 3">
      <span class="jmchoicetm">请选择止血带正确的绑扎位置（单选）:</span>
      <div class="choiceboxsss">
        <div
          class="choiceitem"
          @click="choicefns('A')"
          :class="yxdata.includes('A') ? 'choiceitemyx' : ''"
        >
          <span>A.</span>
          <img src="@/images/ym1.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('B')"
          :class="yxdata.includes('B') ? 'choiceitemyx' : ''"
        >
          <span>B.</span>
          <img src="@/images/ym2.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('C')"
          :class="yxdata.includes('C') ? 'choiceitemyx' : ''"
        >
          <span>C.</span><img src="@/images/ym3.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('D')"
          :class="yxdata.includes('D') ? 'choiceitemyx' : ''"
        >
          <span>D.</span><img src="@/images/ym4.png" alt="" class="ym" />
        </div>
      </div>
      <!-- 回答正确or错误 -->
      <span :class="ertext != '' ? 'rightorerrors' : 'rightorerror'">
        {{ ertext || ritext }}
      </span>
      <!-- 确定or继续按钮 -->
      <img
        v-if="qdshow"
        src="@/images/qdan.png"
        alt=""
        class="qdancss"
        @click="qdfn('A', '单选题', 'true')"
      />
      <img
        v-if="!qdshow"
        src="@/images/jxa.png"
        alt=""
        class="qdancss"
        @click="eritems = 3.1"
      />
    </div>
    <!-- 绑扎压脉带选择题 答案预览解析 -->
    <div class="jmchoiceboxs beautifulScroll" v-if="eritems == 3.1">
      <!-- 提示 -->
      <div class="tipsboxd cxdy">
        <img src="@/images/tiplogo.png" alt="" />
        <span>{{ zhtext }}</span>
      </div>
      <!-- 信息主题 -->
      <div class="dff">
        <!--  -->
        <img src="@/images/ymdesdd.png" alt="" class="hdxxdym" />
        <div class="hdxxdymdes">
          压脉带时操作者应将止血带置于穿刺部位上端约5cm处
        </div>
        <!-- 继续-->
        <img
          src="@/images/jxa.png"
          alt=""
          class="qdancssd"
          @click="eritems = 3.2"
        />
      </div>
    </div>

    <!-- 采血部位带选择题 -->
    <div class="jmchoicebox" v-if="eritems == 4">
      <span class="jmchoicetm">请选择正确的采血部位（单选）:</span>
      <div class="choiceboxsss">
        <div
          class="choiceitem"
          @click="choicefns('A')"
          :class="yxdata.includes('A') ? 'choiceitemyx' : ''"
        >
          <span>A.</span>
          <img src="@/images/cx1.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('B')"
          :class="yxdata.includes('B') ? 'choiceitemyx' : ''"
        >
          <span>B.</span>
          <img src="@/images/cx2.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('C')"
          :class="yxdata.includes('C') ? 'choiceitemyx' : ''"
        >
          <span>C.</span><img src="@/images/cx3.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('D')"
          :class="yxdata.includes('D') ? 'choiceitemyx' : ''"
        >
          <span>D.</span><img src="@/images/cx4.png" alt="" class="ym" />
        </div>
      </div>
      <!-- 回答正确or错误 -->
      <span :class="ertext != '' ? 'rightorerrors' : 'rightorerror'">
        {{ ertext || ritext }}
      </span>
      <!-- 确定or继续按钮 -->
      <img
        v-if="qdshow"
        src="@/images/qdan.png"
        alt=""
        class="qdancss"
        @click="qdfn('A', '单选题', 'true')"
      />
      <img
        v-if="!qdshow"
        src="@/images/jxa.png"
        alt=""
        class="qdancss"
        @click="eritems = 4.1"
      />
    </div>
    <!-- 消毒带选择题 -->
    <div class="jmchoicebox" v-if="eritems == 4.1">
      <span class="jmchoicetm">请选择正确的消毒方式（单选）:</span>
      <div class="choiceboxsss">
        <div
          class="choiceitem"
          @click="choicefns('A')"
          :class="yxdata.includes('A') ? 'choiceitemyx' : ''"
        >
          <span>A.从内向外逆时针</span>
          <img src="@/images/xd1.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('B')"
          :class="yxdata.includes('B') ? 'choiceitemyx' : ''"
        >
          <span>B.从外向内逆时针</span>
          <img src="@/images/xd2.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('C')"
          :class="yxdata.includes('C') ? 'choiceitemyx' : ''"
        >
          <span>C.从外向内顺时针</span
          ><img src="@/images/xd3.png" alt="" class="ym" />
        </div>
        <div
          class="choiceitem"
          @click="choicefns('D')"
          :class="yxdata.includes('D') ? 'choiceitemyx' : ''"
        >
          <span>D.从内向外顺时针</span
          ><img src="@/images/xd4.png" alt="" class="ym" />
        </div>
      </div>
      <!-- 回答正确or错误 -->
      <span :class="ertext != '' ? 'rightorerrors' : 'rightorerror'">
        {{ ertext || ritext }}
      </span>
      <!-- 确定or继续按钮 -->
      <img
        v-if="qdshow"
        src="@/images/qdan.png"
        alt=""
        class="qdancss"
        @click="qdfn('A', '单选题', 'true')"
      />
      <img
        v-if="!qdshow"
        src="@/images/jxa.png"
        alt=""
        class="qdancss"
        @click="eritems = 4.2"
      />
    </div>
    <!-- 采血部位带选择题 答案预览解析 -->
    <div class="jmchoiceboxs" v-if="eritems == 4.2">
      <!-- 提示 -->
      <div class="tipsboxd cxdy">
        <img src="@/images/tiplogo.png" alt="" />
        <span>{{ zhtext }}</span>
      </div>
      <!-- 信息主题 -->
      <div class="dff">
        <!--  -->
        <img src="@/images/cxdes.png" alt="" class="hdxxdyms" />
        <img src="@/images/mq.png" alt="" class="mq" />
        <div class="hdxxdymdess">
          使用棉签蘸取皮肤消毒液，以穿刺点为圆心，以圆形
          方式自内向外进行消毒。消毒范围直径5cm，消毒2次。待 自然干燥后穿刺。
        </div>
        <!-- 继续-->
        <img
          src="@/images/jxa.png"
          alt=""
          class="qdancssd"
          @click="eritems = 4.3"
        />
      </div>
    </div>
    <!-- 综合物品选择框 -->
    <div
      class="jmchoicebox"
      v-if="
        eritems == 3.2 ||
        eritems == 3.3 ||
        eritems == 3.4 ||
        eritems == 4.3 ||
        eritems == 4.4 ||
        eritems == 4.5 ||
        eritems == 5.1 ||
        eritems == 5.2 ||
        eritems == 5.3 ||
        eritems == 5.4 ||
        eritems == 5.5 ||
        eritems == 5.6 ||
        eritems == 5.7 ||
        eritems == 5.8 ||
        eritems == 6.1 ||
        eritems == 6.2 ||
        eritems == 6.3 ||
        eritems == 6.4
      "
    >
      <!-- 提示 -->
      <div class="tipsboxd cxdy">
        <img src="@/images/tiplogo.png" alt="" />
        <span>{{ bztips }}</span>
      </div>
      <!-- 压脉带 -->
      <div class="ymdsb">
        <img
          src="@/images/ymdsb.png"
          alt=""
          class="ymdsb1"
          v-if="eritems == 3.2"
        />

        <img
          src="@/images/tisbd.png"
          alt=""
          class="ymdsb1s tm"
          v-if="eritems == 3.3"
          @click="eritems = 3.4"
        />
        <img
          src="@/images/xdsl.png"
          alt=""
          class="ymdsb1s tm"
          v-if="eritems == 4.4"
          @click="eritems = 4.5"
        />
        <img
          src="@/images/ybdt.png"
          alt=""
          class="ymdsb1"
          v-if="eritems == 3.4 || eritems == 4.3"
        />
        <img
          src="@/images/xdslwc.png"
          alt=""
          class="ymdsb1"
          v-if="eritems == 4.5 || eritems == 5.1"
        />
        <img
          src="@/images/glsb.png"
          alt=""
          class="ymdsb1s tm"
          v-if="eritems == 5.2"
          @click="eritems = 5.3"
        />
        <img
          src="@/images/xsxyz.png"
          alt=""
          class="ymdsb1s"
          v-if="eritems == 5.3"
          @click="eritems = 5.4"
        />
        <img
          src="@/images/kzcx.png"
          alt=""
          class="ymdsb1"
          v-if="eritems == 5.4"
        />
        <img
          src="@/images/fxzg.png"
          alt=""
          class="ymdsb1s"
          v-if="eritems == 5.5"
          @click="eritems = 5.6"
        />
        <img
          src="@/images/lgzkg.png"
          alt=""
          class="ymdsb1"
          v-if="eritems == 5.6"
        />
        <img
          src="@/images/kffgz.png"
          alt=""
          class="ymdsb1"
          v-if="eritems == 5.7"
        />
        <img
          src="@/images/kffgz.png"
          alt=""
          class="ymdsb1sd"
          v-if="eritems == 6.1"
        />
        <img
          src="@/images/kffgzs.png"
          alt=""
          class="ymdsb1ss tm"
          v-if="eritems == 6.1"
          @click="eritems = 6.2"
        />
        <img
          src="@/images/bdwd.png"
          alt=""
          v-if="eritems == 6.3 || eritems == 6.2"
          class="ymdsb1sd"
        />
        <img
          src="@/images/yqfg.png"
          alt=""
          class="yqfg tm"
          v-if="eritems == 6.3"
          @click="eritems = 6.4"
        />
        <img
          src="@/images/ayzt.png"
          alt=""
          class="ymdsb1s"
          v-if="eritems == 6.4"
        />
      </div>
      <!-- 物品栏 -->
      <div class="ymwptool">
        <div class="ymwpbox" v-for="item in wpdatas" :key="item.id">
          <div
            :class="wpidac == item.id ? 'ymwpitem ymwpitemac' : 'ymwpitem'"
            :ref="'ymwp' + item.id"
            @click="yxwpfn(item.id)"
          >
            <img :src="item.src" alt="" class="bdxdysy" />
            <img
              src="@/images/bdxdyxsy.png"
              alt=""
              class="bdxdysy bdxdysys"
              v-if="yxwd.includes(item.id)"
            />
          </div>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <!-- 继续 -->
      <img
        src="@/images/jxa.png"
        alt=""
        class="wzjx"
        @click="eritemfn(6)"
        v-if="eritems == 5.7"
      />
    </div>
    <!-- 进针方向调节 -->
    <!-- 调整度数 -->
    <div class="tzdsbox" v-if="eritems == 5">
      <span class="hdzw">{{ logdes }}</span>
      <div class="tztm">请操控方向键，控制进针角度45°</div>
      <div class="tzbox">
        <div>
          <img src="@/images/tztmbg.png" alt="" />
          <img
            src="@/images/jinzhena.png"
            alt=""
            class="jinzhena"
            @click="tzanfns()"
          />
          <div class="tzan tool" @click="tzanfn()">
            <img src="@/images/tzan.png" alt="" class="normal" />
            <img src="@/images/tzanac.png" alt="" class="active" />
          </div>
        </div>
        <div>
          <span class="jinzhen">进针角度:{{ -rotateds }} °</span>
          <div class="rdroubox">
            <img src="@/images/rdrou.png" alt="" class="rouimg" />
            <img
              src="@/images/zhen.png"
              alt=""
              class="zhen"
              :style="{
                transform: 'rotate(' + rotateds + 'deg)',
                top: toppx * 0.00521 + 'rem',
                right: rightpx * 0.00521 + 'rem'
              }"
            />
          </div>
        </div>
      </div>
      <!-- 确定or继续按钮 -->
      <img
        v-if="qdshow"
        src="@/images/qdan.png"
        alt=""
        class="qdancss"
        @click="ydzn"
      />
      <img
        v-if="!qdshow"
        src="@/images/jxa.png"
        alt=""
        class="qdancss"
        @click="eritems = 5.1"
      />
    </div>
    <!-- 标本处理 -->
    <div class="jmcxzbbox" v-if="eritems == 7">
      <!-- 提示 -->
      <div class="tipsboxd cxdy">
        <img src="@/images/tiplogo.png" alt="" />
        <span>点击按钮，将样品颠倒摇匀6~8次</span>
      </div>
      <!-- 物品栏 -->
      <div class="jmcbox">
        <img
          src="@/images/ypbb.png"
          alt=""
          class="ypbe"
          ref="yydh"
          @animationend="dhwc"
        />
      </div>

      <!-- 确定 -->
      <!-- @click="eritems = 7.1" -->
      <el-button type="primary" round class="ywwpqdq" @click="yydfn"
        >摇 匀</el-button
      >
    </div>
    <!-- 拔针按压提示1 -->
    <div class="wztipstc" v-if="eritems == 6">
      <div class="wzttile">
        <img src="@/images/tstipimg.png" alt="" class="tstipimg" />提醒
      </div>
      <div class="wzdesbox">
        已完成血液采集，拔针前一定解开压脉带，病人松开拳头，采血后患者保持肘部伸展，按压五分钟，以防血肿
      </div>
      <img src="@/images/jxa.png" alt="" class="wzjx" @click="eritems = 6.1" />
    </div>
    <!-- 拔针按压提示2 -->
    <div class="wztipstc" v-if="eritems == 6.5">
      <div class="wzttile">
        <img src="@/images/tstipimg.png" alt="" class="tstipimg" />提醒
      </div>
      <div class="wzdesbox">
        松开压脉带，从静脉拔出采血针。用无菌棉签、棉球或纱布等，按压穿刺点5
        min。
      </div>
      <img src="@/images/jxa.png" alt="" class="wzjx" @click="eritemfn(7)" />
    </div>
    <!-- 文字提示弹窗 -->
    <div class="wztipstc" v-if="eritems == 7.1">
      <div class="wzttile">
        <img src="@/images/tstipimg.png" alt="" class="tstipimg" />提醒
      </div>
      <div class="wzdesbox">
        将样品颠倒摇匀6~8次后，将试管放回试管座内。将样品送入检验科进行下一步处理。
      </div>
      <img src="@/images/jxa.png" alt="" class="wzjx" @click="taskfn(3)" />
    </div>
    <!-- 错误提示 -->
    <error-tips :errortext="errortext" v-if="errortext != ''" />
    <!-- 文字提示弹窗 -->
    <div class="wztipstc" v-if="eritems == 3.4">
      <div class="wzttile">
        <img src="@/images/tstipimg.png" alt="" class="tstipimg" />提醒
      </div>
      <div class="wzdesbox">
        绑扎压脉带后，让患者握拳，会使未梢的血液回流，让暴露的血管更明显，有助于更加准确的进行静脉穿刺抽血。
      </div>
      <img src="@/images/jxa.png" alt="" class="wzjx" @click="eritemfn(4)" />
    </div>
  </div>
</template>

<script>
import ErrorTips from './errorTips.vue'
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》' ;

export default {
  //import引入的组件需要注入到对象中才能使用
  props: {
    eritem: {
      default: 1,
      String
    }
  },
  components: { ErrorTips },
  data() {
    //这里存放数据
    return {
      rotateds: 0,
      logdes: '',
      toppx: 0,
      rightpx: 250,
      wpdata: [
        {
          id: 1,
          src: require('@/images/wp21.png')
        },
        {
          id: 2,
          src: require('@/images/wp22.png')
        },
        {
          id: 3,
          src: require('@/images/wp23.png')
        },
        {
          id: 4,
          src: require('@/images/wp24.png')
        },
        {
          id: 5,
          src: require('@/images/wp25.png')
        },
        {
          id: 6,
          src: require('@/images/wp26.png')
        },
        {
          id: 7,
          src: require('@/images/wp27.png')
        },
        {
          id: 8,
          src: require('@/images/wp28.png')
        },
        {
          id: 9,
          src: require('@/images/wp29.png')
        },
        {
          id: 10,
          src: require('@/images/wp30.png')
        },
        {
          id: 11,
          src: require('@/images/wp31.png')
        },
        {
          id: 12,
          src: require('@/images/wp32.png')
        }
      ],
      correctSelections: [
        {
          id: 1,
          src: require('@/images/wp21.png')
        },
        {
          id: 2,
          src: require('@/images/wp22.png')
        },
        {
          id: 3,
          src: require('@/images/wp23.png')
        },
        {
          id: 4,
          src: require('@/images/wp24.png')
        },
        {
          id: 5,
          src: require('@/images/wp25.png')
        },
        {
          id: 6,
          src: require('@/images/wp26.png')
        },
        {
          id: 7,
          src: require('@/images/wp27.png')
        },
        {
          id: 8,
          src: require('@/images/wp28.png')
        },
        {
          id: 9,
          src: require('@/images/wp29.png')
        },
        {
          id: 10,
          src: require('@/images/wp30.png')
        }
      ],
      yxwpdata: [],
      yxdata: [],
      ritext: '',
      ertext: '',
      qdshow: true,
      eritems: 1,
      errortext: '',
      zhtext: '',
      hs: '',
      hz: '',
      wpdatas: [
        {
          id: 1,
          name: '压脉带',
          src: require('@/images/wp21.png')
        },
        {
          id: 2,
          name: '医用棉签',
          src: require('@/images/wp22.png')
        },
        {
          id: 3,
          name: '采血针',
          src: require('@/images/wp23.png')
        },
        {
          id: 4,
          name: '真空采血管',
          src: require('@/images/wp32.png')
        },
        {
          id: 5,
          name: '皮肤消毒液',
          src: require('@/images/wp26.png')
        }
      ],
      bztips: '',
      wpid: 0,
      wpidac: 0,
      yxwd: []
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    wpid: {
      handler(i) {
        if (i != 0) {
          let index = this.yxwd.indexOf(i)
          console.log('index', index)
          if (index != -1) {
            this.yxwd.splice(index, 1)
          }
        }
      },
      immediate: true,
      deep: true
    },
    eritem: {
      handler(i) {
        this.eritems = i
        this.audioUrlfn('')
      },
      immediate: true,
      deep: true
    },
    errortext: {
      handler(i) {
        if (i) {
          const timer = setTimeout(() => {
            this.errortext = ''
            clearTimeout(timer)
          }, 1000)
        }
      },
      immediate: true,
      deep: true
    },
    eritems: {
      handler(i) {
        this.hs = ''
        this.hz = ''
        console.log('i', i)
        this.ertext = ''
        this.audioUrlfn('')
        this.qdshow = true
        this.ritext = ''
        this.yxdata = []
        if (i == 2.4) {
          this.hs = '您好，请问您叫什么名字？'
          this.audioUrlfn(require('@/images/radio/hs1.mp3'))
        }
        if (i == 2.5) {
          this.hs = ''
          this.hz = '您好，我叫江嘉。'
          this.audioUrlfn(require('@/images/radio/hz1.mp3'))
        }
        if (i == 3.2) {
          this.bztips = '点击压脉带，将压脉带绑扎在患者上臂'

          const timer = setTimeout(() => {
            console.log('ssss', this.$refs['ymwp1'])
            this.$refs['ymwp1'][0].classList.add('tm')
            this.wpid = 1
            clearTimeout(timer)
          })
          // this.$nextTick(() => {
          //   this.$refs['ymwp' - 1].classList.add('tm')
          // })
        }
        if (i == 3.4) {
          this.yxwd.push(this.wpidac)
          this.wpidac = 0
          this.wpid = 0
        }
        if (i == 4.3) {
          this.bztips = '点击压脉带，将压脉带绑扎在患者上臂'

          const timer = setTimeout(() => {
            console.log('ssss', this.$refs['ymwp1'])
            this.$refs['ymwp5'][0].classList.add('tm')
            this.wpid = 5
            clearTimeout(timer)
          })
        }
        if (i == 4.5) {
          this.yxwd.push(this.wpidac)
          this.wpidac = 0
          this.wpid = 0
          const timer = setTimeout(() => {
            this.eritemfn(5)
            clearTimeout(timer)
          }, 1000)
        }
        if (i == 5.1) {
          this.bztips = '点击采血针，进行采血'

          const timer = setTimeout(() => {
            console.log('ssss', this.$refs['ymwp1'])
            this.$refs['ymwp3'][0].classList.add('tm')
            this.wpid = 3
            clearTimeout(timer)
          })
        }
        if (i == 5.2) {
          this.$refs['ymwp3'][0].classList.remove('tm')
          this.yxwd.push(this.wpidac)
          this.wpidac = 0
          this.wpid = 0
        }
        if (i == 5.3) {
          this.bztips = '点击手臂，显示采血的的状态'
        }
        if (i == 5.4) {
          this.bztips = '点击采血管，将采血管接到采血针尾部'
          const timer = setTimeout(() => {
            console.log('ssss', this.$refs['ymwp1'])
            this.$refs['ymwp4'][0].classList.add('tm')
            this.wpid = 4
            clearTimeout(timer)
          })
        }
        if (i == 5.6) {
          this.yxwd.push(this.wpidac)
          this.wpidac = 0
          this.wpid = 0
          const timer = setTimeout(() => {
            this.eritems = 5.7
            clearTimeout(timer)
          }, 1500)
        }
        if (i == 6.1) {
          this.bztips = '点击松开压脉带'
        }
        if (i == 6.2) {
          this.bztips = '点击棉签，按压采血点'
          const timer = setTimeout(() => {
            console.log('ssss', this.$refs['ymwp1'])
            this.$refs['ymwp2'][0].classList.add('tm')
            this.wpid = 2
            clearTimeout(timer)
          })
        }
        if (i == 6.4) {
          this.yxwd.push(this.wpidac)
          this.wpidac = 0
          this.wpid = 0
          const timer = setTimeout(() => {
            this.eritems = 6.5
            clearTimeout(timer)
          }, 1500)
        }
      },
      immediate: true,
      deep: true
    }
  },
  //方法集合
  methods: {
    yxwpfn(i) {
      if (i == this.wpid) {
        this.wpidac = i
        if (this.eritems == 3.2) {
          // 当前是绑定压脉带步骤哦
          // 绑定完成显示 已点击状态 然后再点击已使用状态

          this.eritems = 3.3
        }
        if (this.eritems == 4.3) {
          // 当前是绑定压脉带步骤哦
          // 绑定完成显示 已点击状态 然后再点击已使用状态

          this.eritems = 4.4
        }
        if (this.eritems == 5.1) {
          // 当前是绑定压脉带步骤哦
          // 绑定完成显示 已点击状态 然后再点击已使用状态

          this.eritems = 5.2
        }
        if (this.eritems == 5.4) {
          // 当前是绑定压脉带步骤哦
          // 绑定完成显示 已点击状态 然后再点击已使用状态

          this.eritems = 5.5
        }
        if (this.eritems == 6.2) {
          // 当前是绑定压脉带步骤哦
          // 绑定完成显示 已点击状态 然后再点击已使用状态

          this.eritems = 6.3
        }
      } else {
        this.errortext = '请选择正确的物品'
      }
    },
    tzanfn() {
      if (this.rotateds > -45) {
        this.$nextTick(() => {
          this.rotateds -= 5
        })
      }
    },
    tzanfns() {
      console.log('现在度数', this.rotateds)
      if (this.rotateds == -45) {
        if (this.toppx < 40) {
          this.$nextTick(() => {
            this.toppx += 10
            this.rightpx -= 10
            console.log('topx', this.toppx)
          })
        }
      }
    },
    ydzn() {
      console.log('现在topx', this.toppx)
      const timer = setTimeout(() => {
        this.qdshow = false
        clearTimeout(timer)
      })
      if (this.rotateds == -45 && this.toppx == 40) {
        console.log('回答正确')
        this.logdes = '回答正确'
      } else {
        this.logdes = '回答错误'
      }
    },
    audioUrlfn(i) {
      this.$emit('audioUrlfn', i)
    },

    choicewp(i) {
      if (this.yxwpdata.length <= 9) {
        // 验证数据是否已存在
        const isDuplicate = this.yxwpdata.some(
          (item) => item.id === i.id && item.src === i.src
        )

        // 如果不存在则添加到新数组
        if (!isDuplicate) {
          this.yxwpdata.push(i)
        }
      }
    },
    yxwpchoice(i) {
      this.yxwpdata = this.yxwpdata.filter((item) => item.id !== i)
    },
    choiceqd() {
      // 如果用户选择的数量不等于正确选择的数量，则判断为错误
      if (this.correctSelections.length !== this.yxwpdata.length) {
        this.yxwpdata = []
        console.log('回答错误')
        this.errortext = '选择错误，请选择正确的物品'
        return false
      }

      // 检查每个用户选择是否在正确选择列表中
      for (let i = 0; i < this.yxwpdata.length; i++) {
        const userSelection = this.yxwpdata[i]
        const isCorrect = this.correctSelections.some((correctSelection) => {
          return (
            correctSelection.id === userSelection.id &&
            correctSelection.src === userSelection.src
          )
        })

        // 如果有任何一个用户选择不在正确选择列表中，则判断为错误
        if (!isCorrect) {
          this.yxwpdata = []
          console.log('回答错误')
          this.errortext = '选择错误，请选择正确的物品'
          return false
        } else {
          this.yxwpdata = []
          console.log('回答正确')
          this.eritems = 1.1
          return true
        }
      }

      // 所有用户选择都在正确选择列表中，则判断为正确
    },
    choicefn(i) {
      // 检查数组是否包含 i
      if (this.yxdata.some((item) => item === i)) {
        // 如果包含了，则从数组中删除该项
        const index = this.yxdata.findIndex((item) => item == i)
        if (index !== -1) {
          this.yxdata.splice(index, 1)
        }
      } else {
        // 如果不包含，则添加到数组中 且不是单选的时候才添加如果是单选的情况
        this.yxdata = []
        this.yxdata.push(i)

        // 不是单选屏蔽掉上面代码 只写this.yxdata.push(i)
      }
    },
    choicefns(i) {
      // 检查数组是否包含 i
      if (this.yxdata.some((item) => item === i)) {
        // 如果包含了，则从数组中删除该项
        const index = this.yxdata.findIndex((item) => item == i)
        if (index !== -1) {
          this.yxdata.splice(index, 1)
        }
      } else {
        // 如果不包含，则添加到数组中 且不是单选的时候才添加如果是单选的情况
        // this.yxdata = []
        this.yxdata.push(i)

        // 不是单选屏蔽掉上面代码 只写this.yxdata.push(i)
      }
    },
    qdfn(i, name, flag) {
      if (this.yxdata.length > 0) {
        if (name == '单选题') {
          this.yxdata.forEach((items) => {
            if (i == items) {
              this.ritext = '回答正确'
              this.zhtext = '回答正确'
              this.ertext = ''
            } else {
              this.ertext = '回答错误,正确答案：' + i
              this.ritext = ''
              this.zhtext = '回答错误'
            }
          })
        }
        if (name == '多选题') {
          if (this.yxdata.length < i.length) {
            this.ertext = '回答错误,正确答案：' + i
            this.zhtext = '回答错误'
            this.ritext = ''
          } else {
            const isCorrect = this.yxdata.every((answer) => i.includes(answer))

            if (isCorrect) {
              //多选题回答正确
              this.ritext = '回答正确'
              this.zhtext = '回答正确'
              this.ertext = ''
            } else {
              //多选题回答错误
              this.zhtext = '回答错误'
              this.ertext = '回答错误,正确答案：' + i
              this.ritext = ''
            }
          }
        }
        if (flag) {
          this.qdshow = false
        }
      } else {
        this.$alert('请先选择答案', '提示', {
          confirmButtonText: '确定'
        })
      }
    },
    eritemfn(i) {
      this.$emit('eritemfn', i)
    },
    taskfn(i) {
      this.$emit('taskfn', i)
    },
    yydfn() {
      this.$refs.yydh.classList.add('ypbedh')
    },
    dhwc() {
      this.$refs.yydh.classList.remove('ypbedh')
      this.eritems = 7.1
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
.ywwpqdq {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
}
.cxdy {
  position: absolute;
  top: 15px;
}
.chuanbg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wpimgs {
  width: 155px;
  height: 154px;
}
.wpimgss {
  width: 98px;
  height: 98px;
}
.wzjx {
  width: 168px;
  height: 54px;
}
</style>
